<template>
	<div class="fixed bottom-0 w-full h-[68px] bg-bg-1 flex justify-around items-center shadow z-[1]">
		<div
			v-for="item in list"
			:key="item.id"
			class="flex flex-col items-center footer-mobile__item"
			:class="item.selected ? 'text-primary active' : 'text-t-3'"
			@click="onClick(item.id)">
			<div class="footer-mobile__divider"></div>
			<base-icon :name="item.icon" size="24"></base-icon>
			<base-text :text-t="'app.' + item.id" class="text-sm" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { BaseIcon, BaseText } from '@/components/base'
import { useRoute, useRouter } from 'vue-router'
import { customerService } from '@/utils'
import { useAppStore } from '@/store'

const appStore = useAppStore()
const route = useRoute()
const router = useRouter()

const list = ref([
	{
		id: 'browse',
		icon: 'menu',
		selected: false
	},
	{
		id: 'casino',
		icon: 'game2',
		selected: false
	},
	{
		id: 'vip',
		icon: 'discover2',
		selected: false
	},
	{
		id: 'sports',
		icon: 'sports',
		selected: false
	},
	{
		id: 'chat',
		icon: 'bbs',
		selected: false
	}
])

const selectedMenu = ref(true)

const onClick = (id: string) => {
	if (id === 'chat') {
		customerService()
	} else if (id === 'browse') {
		highlightMenu('browse')
		selectedMenu.value = !appStore.mobileMenuShow
		appStore.showMobileMenu(!appStore.mobileMenuShow)
	} else if (id === 'sports') {
		appStore.showTodo(true)
	} else {
		appStore.showMobileMenu(false)
		router.push({ name: id, params: { locale: appStore.lang } })
		highlightMenu(id)
	}
}
const highlightMenu = (id: any) => {
	const routeName = route.meta?.category

	list.value.forEach((element) => {
		if (id === 'browse') {
			if (element.id === id) {
				element.selected = true
			} else {
				element.selected = false
			}
		} else {
			if (element.id === id || element.id === routeName) {
				element.selected = true
			} else {
				element.selected = false
			}
		}
	})
}
watch(
	() => [router.currentRoute.value],
	() => {
		highlightMenu(route.name)
	}
)
watch(
	() => [appStore.mobileMenuShow],
	() => {
		if (!appStore.mobileMenuShow) {
			highlightMenu(route.name)
		}
	}
)
onMounted(async () => {
	await router.isReady()
	appStore.showMobileMenu(false)
	highlightMenu(route.name)
})
</script>
<style>
.footer-mobile__divider {
	width: 0;
	height: 4px;
	background-color: var(--color-primary);
	margin-bottom: 12px;
	transition: all 0.3s;
}
.footer-mobile__item {
	width: 40px;
	height: 100%;
	transition: all 0.3s;
}
.footer-mobile__item.active .footer-mobile__divider {
	width: 40px;
}
</style>
, highlight
